import { defineComponent, computed } from "vue"
import "./style.less"
export default defineComponent({
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  setup (props) {
    const className = computed(() => {
      if (props.className) {
        return `svg-icon ${props.className}`
      } else {
        return "svg-icon"
      }
    })
    const icon = computed(() => {
      return `#icon-${props.iconClass}`
    })
    return () => (
      <svg class={className.value} aria-hidden="true">
        <use xlinkHref={icon.value} />
      </svg>
    )
  }
})